<div class="recentCheckins">
	<h2>Recent Check-ins</h2>
	<table id="recentTable">
		<tr id="recentHeader">
			<th>Name</th>
			<th>Event</th>
			<th>How Long Ago</th>
			<th>Profile</th>
			<!--<th>Waiver</th>-->
			<th>Certification</th>
		</tr>
		{% for recent in recents %}
    		<tr><td>{{recent.name}}</td><td>{{recent.type}}</td><td>{{recent.time|timesince}}</td><td><a href="{{recent.profile}}">{{recent.username}}</a> (<a href="/userprofile/staff/{{recent.pk}}">edit</a>)<br>(<a href="/userattributes/{{recent.pk}}">certs</a>)</td><!--<td>{{recent.waiver}}</td>--><td>{{recent.attribute}}</td></tr>
  		{% endfor %}
	</table>
</div>

{% if success %}
	<script type="text/javascript">
		function doFade(current) {
			if(current >= 255) return;
			
			var recentTable = document.getElementById('recentTable');
			var recentRows = recentTable.getElementsByTagName('tr');
			var mostRecent = recentRows[1];
			
			mostRecent.style.background = 'rgb(255,' + current + ',' + current + ')';
			
			setTimeout('doFade(' + (current + 2) + ')', 1);
		};
		
		$(document).ready(function() {
			doFade(0);
		});
	</script>
{% endif %}